import React from 'react';
import {useNavigate} from 'react-router-dom';
import { Form, Input, Button,Space,message } from 'antd';
import Pannel from '../../component/Pannel/Pannel'
import { checkPWD,savePWD } from "../../api/account";

const EditPassWord = () => {
    const [form] = Form.useForm();
    const [messageApi, contextHolder] = message.useMessage(); //获取提示对象
    const navigate = useNavigate(); //路由相关的hooks

    const layout = {
        labelCol: {
            span: 6,
        },
        wrapperCol: {
            span: 18,
        },
    };

    //   最后的按钮表单项布局
    const tailLayout = {
        wrapperCol: {
            offset: 6,
            span: 18,
        },
    };

    const onFinish = async () => {
        try {
            // 取值
            // let a = await form.validateFields(); //异步获取表单值
            // const values = form.getFieldsValue(); //同步获取表单所有的值
            const val = form.getFieldsValue(); 
            console.log(val)
            // 提交表单
            // A:原始密码不对
            let res = await checkPWD({oldPwd:val.oldPwd})
            console.log(res)
            if(res.code !== '00'){
                // 返回，不作处理
                return messageApi.open({
                    type: 'error',
                    content: res.msg,
                });
            }
            console.log(111)

            // B：原始密码对的，就提交新密码
            let res2 = await savePWD({newPwd:val.password})
            if(res2.code ==0){
                messageApi.open({
                    type: 'success',
                    content: res2.msg,
                });

                // 修改成功，跳转到登录页面
                // navigate("/login")
            }
        } catch (errorInfo) {
            console.log('Failed:', errorInfo);
        }
    };

    const onReset = () => {
        form.resetFields();
    };

    return (
        <>
         {contextHolder}
        <Pannel title="修改密码">
        <Form form={form}
              onFinish={onFinish}  {...layout}
              style={{
            maxWidth: 500,
        }}>
            <Form.Item
                name="oldPwd"
                label="原密码"
                rules={[
                    {
                        required: true,
                        message: '不能为空，请输入账号名称!',
                    },
                    {
                        min: 3,
                        message: '最小长度为3个字符!',
                    },
                    {
                        pattern: /^[a-zA-Z0-9]+$/,  
                        //自定义验证，使用pattern选项，设置正则表达式
                        message: '账号名称必须包含字母或数字!',
                    },
                ]}
            >
                <Input />
            </Form.Item>

            <Form.Item
                name="password"
                label="密码"
                rules={[
                    {
                        required: true,
                        message: '请输入密码',
                    },
                    {
                        min: 8,
                        max: 12,
                        message: '密码长度在8-12位之间!',
                    },
                    {
                        pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]+$/,
                        message: '密码必须包含最少一个小写、大写的单词，一个数字',
                    },
                ]}
            >
                <Input.Password />
            </Form.Item>

            {/* <Form.Item
                name="email"
                label="邮箱"
                rules={[
                    {
                        required: true,
                        message: '请输入邮箱地址',
                    },
                    {
                        type: 'email',
                        message: '邮箱格式不对，请重新输入',
                    },
                ]}
            >
                <Input />
            </Form.Item> */}

            <Form.Item  {...tailLayout}>
                <Space>
                <Button type="primary" htmlType="submit">
                    提交
                </Button>

                <Button htmlType="button" onClick={onReset}>
                    重置
                </Button>
                </Space>
            </Form.Item>
        </Form>
        </Pannel>
        </>
    );
};

export default EditPassWord;